<template>
  <view class="menu-container">
    <view class="header-top"></view>
    <view class="menu-header">
      <text class="t-icon t-icon-guanjun"></text>
      <view class="menu-title">UinApp Ui 模板</view>
      <text class="iconfont icon-weibiaoti--4"></text>
    </view>
    <!-- 顶部nav页面包含底部切换的内容，有联动效果 -->
    <topNav001></topNav001>
  </view>
</template>

<script>
// 页面介绍：菜单页面
// 右侧箭头点击打开的整体菜单，左侧是页面分类，右侧是分类下的页面展示
import { defineComponent } from "vue";
export default defineComponent({
  name: "菜单页面",
  props: {},
  setup(props, context) {
    return {};
  },
});
</script>

<style scoped lang="less">
.menu-container {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  .header-top {
    height: 80rpx;
    background: #fff;
  }
  .menu-header {
    height: 80rpx;
    line-height: 80rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    .menu-title {
      font-size: 30rpx;
      // 文字彩色渐变
      background: linear-gradient(
        to right,
        #ff4646,
        #ff7b00,
        #06a800,
        #001aff,
        #ff00f2
      );
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      font-weight: 700;
    }
    .t-icon-guanjun {
      margin-left: 10rpx;
      width: 60rpx;
      height: 60rpx;
    }
    .icon-weibiaoti--4 {
      margin-right: 20rpx;
      font-size: 32rpx;
    }
  }
}
</style>
